import './index.scss'
import { Divider, Radio, Space, Table, Button, Switch, Col, Form, Input, Row, Select, theme, DatePicker, Pagination, Modal, message, Upload } from 'antd';
import { useEffect, useState } from 'react';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { searc } from '../../../utils/sendRequst';
import { delsearc } from '../../../utils/sendRequst';
import { addsearc } from '../../../utils/sendRequst';
import { editsearc } from '../../../utils/sendRequst';
import dayjs from 'dayjs'
import { render } from 'react-dom';
// const { RangePicker } = DatePicker;
const { Option } = Select;



const Student = () => {
    // 渲染页面全部数据
    const getall = () => {
        searc().then(res => {
            // console.log(res);

            // console.log(res.data, "res");
            const list = res.data.map(item => ({ ...item, key: item.seriaId }))
            // console.log(list, 'list');
            SetDataList(list)
        })

    };
    // 自动调用渲染页面数据请求
    useEffect(() => {
        getall()
    }, [])

    // 编辑日期
    const dateFormat = 'YYYY-MM-DD';
    // 删除
    const delcc = (dd) => {
        delsearc(dd).then(res => {
            if (dd.serShelf == true) {
                message.success("不可删除")
            } else {
                if (res.code == 200) {
                    console.log(res);
                    getall()
                    message.success('删除成功')
                } else {
                    message.success('服务器出错')
                }
            }

        })
    };
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);

    // 添加
    const add = () => {
        setIsModalOpen(true);
    };
    const onFinishok = (values) => {
        console.log('onFinishok', values);
        let myFormData = new FormData()


        myFormData.append('serKeywords', values.serKeywords)
        myFormData.append('serShelf', values.serShelf)

        let row = []
        for (const [key, value] of myFormData.entries()) {
            row.push(` ${value}`)

        }
        // console.log(row, '111111');
        addsearc(row).then(res => {
            console.log('添加结果', res);
            getall()
        }).catch(err => {
            console.log('添加失败', err);
        })
    }
    const onFinishFailedok = (values) => {
        // console.log('onFinishFailed:', values);

    }
    const [selectionType, setSelectionType] = useState('checkbox');
    const [dataList, SetDataList] = useState([]);
    //编辑的ID
    const [dataID, setDateID] = useState([])
    // 编辑
    const [list, setlist] = useState([]);
    const bianji = (row) => {
        setDateID(row.seriaId)
        // console.log(row);

        setlist(row)
        setIsModalOpen1(true);
        // getall();
    };
    // const onFinishok1 = (values) => {
    //     setIsModalOpen1(false);
    //     let list = []
    //     list.push(values)
    //     let op = list.map((item) => ({ ...item, dataID: dataID }))
    //     editsearc(op[0]).then(res => {
    //         if (res.code == 200) {
    //             message.success("修改成功")
    //             getall();
    //         } else {
    //             message.success("修改失败")
    //         }
    //     })
    // }
    //编辑的模态框确定
    const onFinishOk1 = (values) => {

        setIsModalOpen1(false);
        let list = []
        list.push(values)
        let op = list.map((item) => ({ ...item, dataID: dataID }))
        editsearc(op[0]).then(res => {
            if (res.code == 200) {
                message.success("修改成功")
                getall();
            } else {
                message.success("修改失败")
            }
        })
    }

    const onFinishFailedok1 = (values) => {
        // console.log('onFinishFailed:', values);

    }

    // 表格样式
    const columns = [
        {
            title: '序号',
            dataIndex: 'seriaId',
            // key: 'id'
        },
        {
            title: '关键词名称',
            dataIndex: 'serKeywords',
            // key: 'name'
        },
        {
            title: '是否状态',
            // key: 'zhuangtai',
            render: (text, record, index) => {
                return (
                    <Switch
                        defaultChecked={record.serShelf}
                        disabled

                    />
                );
            },

        },

        {
            title: '操作',
            render: (_, record) => (
                <Space size="small">
                    {/* <a type={"default"} onClick={() => {
                    edit(record)
                }}>编辑</a> */}
                    <a type={"default"} onClick={() => {
                        bianji(record)
                    }}>编辑</a>
                    <a type={"spgl"} onClick={() => { delcc(record) }}>删除</a>

                </Space>
            ),
        },
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    //改变编辑中 上下架的状态
    const onSwitchChange = (checkedValue) => {
        setlist((prevState) => ({
            ...prevState,
            serShelf: checkedValue
        }));
    };
    return (
        <div className='all'>


            <div className='table'>
                {/* <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);
                    }}
                    value={selectionType}
                >

                </Radio.Group> */}

                <Divider />
                <div className='tianjia'>
                    <p className="heder-text">
                        数据列表
                    </p >
                    <div className='hederText'>
                        <p type={"default"} onClick={add}

                        >添加</p>
                    </div>

                </div>
                {/* <div onClick={aaa}>获取res</div> */}
                <Table pagination={{ pageSize: 5 }}
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={dataList}
                />
                {/* <Pagination
                    total={30}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `Total ${total} items`}
                /> */}
            </div>
            <>
                <Modal title="添加场景专区" open={isModalOpen} footer={null}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        onFinish={onFinishok}
                        onFinishFailed={onFinishFailedok}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="关键词名称"
                            name="serKeywords"
                            rules={[{ required: true, message: '关键词名称' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="上架状态"
                            name="serShelf"
                            rules={[{ required: true, message: '状态必选' }]}
                        >
                            <Switch checked={list.serShelf} onChange={(checkedValue) => onSwitchChange(checkedValue)} />

                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className='btnoo' onClick={() => {
                                setIsModalOpen(false);
                            }}>
                                确定
                            </Button>
                            <Button type="primary" className='btnoo' onClick={() => {
                                setIsModalOpen(false);
                            }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>

                </Modal>
            </>
            <>
                <Modal title="编辑场景专区" open={isModalOpen1} footer={null} destroyOnClose={true}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        onFinish={onFinishOk1}
                        onFinishFailed={onFinishFailedok1}
                        autoComplete="off"
                        initialValues={{ serKeywords: list.serKeywords, serShelf: list.serShelf }}
                    >
                        <Form.Item
                            label="关键词名称"
                            name="serKeywords"
                            rules={[{ required: true, message: '关键词名称' }]}
                        >
                            <Input />
                        </Form.Item>



                        <Form.Item
                            label="上架状态"
                            name="serShelf"
                            rules={[{ required: true, message: '状态必选' }]}
                        >
                            <Switch checked={list.serShelf} onChange={(checkedValue) => onSwitchChange(checkedValue)} />

                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" className='btnoo' onClick={() => {
                                setIsModalOpen1(false);
                            }}>
                                确定
                            </Button>
                            <Button type="primary" className='btnoo' onClick={() => {
                                setIsModalOpen1(false);
                            }}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>

                </Modal>
            </>
        </div>
    );
}

export default Student;